<template>
	<view>
		<view class="bg" :style="{backgroundImage:bgImage}"></view>
		<view>
			<image class="img" :src="picUrl" mode="widthFix"></image>
			<view class="songName">{{musicDetail.name}}</view>
			<view class="arNames">{{arNames}}</view>
			<view>
				<!-- <view class="page-section page-section-gap" style="text-align: center;">
					<audio style="text-align: left" :src="musicUrl" :action="audioAction" controls></audio>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picUrl: "",
				musicId: "",
				musicDetail: [],
				arNames: "",
				musicUrl: "",
			}
		},
		onLoad(option) {
			this.musicId = option.id
			this.init()
		},
		computed:{
			bgImage(){
				return 'url('+this.picUrl+')'
			}
		},
		methods: {
			async init() {
				await this.$afRequest({
					url: "/song/detail?ids=" + this.musicId
				}).then(res => {
					this.musicDetail = res.data.songs[0]
					this.picUrl = this.musicDetail.al.picUrl
				})
				await this.$afRequest({
					url: "/song/url?id=" + this.musicId
				}).then(res => {
					this.musicUrl = res.data.data[0].url
				})
				this.connectName()
			},
			connectName() {
				let names = this.musicDetail.ar.map(item => {
					return item.name
				})
				for (let i = 0; i < names.length; i++) {
					if (i == names.length - 1) {
						this.arNames = this.arNames + names[i]
					} else {
						this.arNames = this.arNames + names[i] + "/"
					}
				}
			},

		}
	}
</script>

<style>
	.bg{
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		filter: blur(50px);
		transform: scale(2.2,2.2);
	}
	.img{
		display:block;
		position:relative;
		margin:auto;
		width: 550rpx;
		top: 80rpx;
		border: 2px solid #333333;
		border-radius: 10px;
	}
	.songName{
		color: #FFFFFF;
		font-size: 50rpx;
		position: relative;
		top: 150rpx;
		left: 60rpx;
	}
	.arNames{
		color: #FFFFFF;
		font-size: 30rpx;
		position: relative;
		top: 170rpx;
		left: 60rpx;
	}
</style>
